<!DOCTYPE html>
<html>
<head>
	<title>假条列表</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

	<!-- 所有的 css 资源 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">

	<!-- 所有的 js 资源 -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
	<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../static/kj/laydate/laydate.js"></script>
	<script src="../../static/sa.js"></script>

	<style type="text/css">

	</style>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div id="vue-box" style="display: none;" :style="'display: block;'">

	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">查找请假条</div>
		<el-form ref="form">
			<div class="c-item">
				<label class="c-label">工号：</label>
				<el-input size="mini" v-model="p.job_id" placeholder="请输入工号"></el-input>

				<label class="c-label">姓名：</label>
				<el-input size="mini" v-model="p.ename" placeholder="请输入姓名"></el-input>

				<label class="c-label">请假编号：</label>
				<el-input size="mini" v-model="p.aleave_id" placeholder="请输入请假编号"></el-input>
			</div>



			<div class="c-item">
				<label class="c-label">请假日期：</label>

				<el-input size="mini" v-model="p.beginDate" class="beginDate"></el-input>
				&nbsp;至&nbsp;
				<el-input size="mini" v-model="p.endDate" class="endDate"></el-input>
			</div>



			<div class="c-item" style="min-width: 0px;">
				<el-button type="primary" icon="el-icon-search" size="mini" @click="findfit">查询</el-button>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加假条</el-button>
			</div>


			<br />
		</el-form>

	</div>

	<!-- 数据栏 -->
	<div class="c-panel">
		<div class="c-title">请假条列表</div>
		<el-table class="data-table" :data="aleaveinfolist" size="mini"  style="width: 100%">

			<el-table-column label="请假编号" prop="aleave_id" width="100px" sortable></el-table-column>
			<el-table-column label="工号" prop="job_id"  sortable>
				<template slot-scope="scope">
					<b>{{scope.row.job_id}}</b>
				</template>
			</el-table-column>
			<el-table-column label="员工姓名" prop="ename" sortable></el-table-column>
			<el-table-column label="性别">
				<template slot-scope="scope">
					<span  v-if="scope.row.sex===1">{{scope.row.sex | sexFormat}}</span>
					<span  v-if="scope.row.sex===0">{{scope.row.sex | sexFormat}}</span>
				</template>
			</el-table-column>

			<el-table-column label="开始时间" prop="btime"  sortable></el-table-column>
			<el-table-column label="结束时间" prop="etime"  sortable></el-table-column>

			<el-table-column label="请假理由" prop="reason"  sortable></el-table-column>

			<el-table-column label="批准状态" prop="examine"  sortable>
				<template slot-scope="scope">
				<span style="color: orange" v-if="scope.row.examine===0">{{scope.row.examine | statusFormat}}</span>
				<span style="color: green" v-if="scope.row.examine===1">{{scope.row.examine | statusFormat}}</span>
				<span style="color: red" v-if="scope.row.examine===2">{{scope.row.examine | statusFormat}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="address" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" class="c-button" icon="el-icon-edit" @click="Approvalaleave(scope.row)" v-if="scope.row.examine===2 ||  scope.row.examine===0">批准</el-button>
					<el-button type="danger" class="c-button" icon="el-icon-delete" @click="Refusealeave(scope.row)" v-if="scope.row.examine===1  ||  scope.row.examine===0">拒绝</el-button>
				</template>
			</el-table-column>
		</el-table>


<!--		&lt;!&ndash; 修改&ndash;&gt;-->
<!--		<el-dialog title="假条信息修改" :visible.sync="editVisible" width="30%">-->


		<!-- 添加 -->
		<el-dialog title="请假条添加" :visible.sync="addVisible" width="30%">
			<el-form  name="temp" id="temp" ref="temp"  :model="temp" label-width="100px">

				<el-form-item label="工号">
					<el-input  id="job_id" name="job_id" v-model="temp.job_id" maxlength="6" placeholder="请输入工号" size="mini" show-word-limit onkeyup="this.value=this.value.replace(/\D/g,'')"/>
				</el-form-item>

				<el-form-item label="开始时间" >
					<el-date-picker
							id="btime"
							name="btime"
							v-model="temp.btime"
							value-format="yyyy-MM-dd"
							size="mini"
							type="date"
							placeholder="开始时间">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="结束时间" >
					<el-date-picker
							id="etime"
							name="etime"
							v-model="temp.etime"
							size="mini"
							value-format="yyyy-MM-dd"
							type="date"
							placeholder="结束时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="理由">
					<el-input
							id="reason"
							name="reason"
							type="textarea"
							autosize
							placeholder="请输入理由"
							maxlength="200"
							v-model="temp.reason"
							show-word-limit >
					</el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
            <el-button  @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAdd()">确 定</el-button>
          </span>
		</el-dialog>

		<!-- 分页 -->
		<div class="page-box">
			<el-pagination background
						   layout="total, prev, pager, next, sizes, jumper"
						   :current-page.sync="page.pageNo"
						   :page-size.sync="page.pageSize"
						   :total="page.count"
						   :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
						   @current-change="f5(true)"
						   @size-change="f5(true)">
			</el-pagination>
		</div>

	</div>

	<br><br><br><br><br><br><br><br><br>


</div>

<script>
	// 定义一个 Vue 全局的过滤器，名字叫做  statusFormat
	Vue.filter('sexFormat', function (val) {
		if(val===1){
			return '男'
		}else if(val===0){
			return '女'
		}
	})

	Vue.filter('statusFormat', function (val) {
		if(val===0){
			return '未处理'
		}else if(val===1){
			return '批准'
		}
		else if(val===2){
			return '拒绝'
		}
	})

	function init_laydate() {
		// 开始日期
		laydate.render({
			elem: '.beginDate input',
			type: 'date',
			done: function(value, date){
				app.p.beginDate = value;
			}
		});
		// 结束日期
		laydate.render({
			elem: '.endDate input',
			type: 'date',
			done: function(value, date){
				app.p.endDate = value;
			}
		});
	}



	var app = new Vue({
		el: '#vue-box',
		data:{
			p: {	// 查询参数
				job_id: undefined,
				aleave_id: undefined,
				beginDate: "",
				endDate: "",
				ename:"",
			},
			page: {	// 分页信息
				pageNo: 1,
				pageSize: 10,
				count: 30
			},
			aleaveinfolist:[
				{
					aleave_id:1,
					job_id:2,
					btime:"2019-10-01",
					etime:"2019-10-07",
					reason:"国庆放假",
					examine:1,
					ename:"张哥",
					sex:1
				}
			],

			statusOptions:[
				{
					value: '0',
					label:'未处理'
				},
				{
					value: '1',
					label:'批准'
				},
				{
					value: '2',
					label:'拒绝'
				},
			],

			editVisible:false,
			addVisible:false,

			//添加参数
			temp:{
				job_id:undefined,
				btime:"",
				etime:"",
				reason:"",
				examine:undefined,
			}
		},



		created: function () {
			this.getData();
			init_laydate();

		},


		methods: {



			handleAdd:function(row){
				this.addVisible = true
			},



			//添加请假条
			saveAdd:function() {
				var that = this
				if (temp.job_id.value=="")
				{
					layer.tips('请输入工号',$("#job_id"));
					temp.job_id.focus();
					return false;
				}
				else if (temp.btime.value=="")
				{
					layer.tips('请选择开始时间',$("#btime"));

					temp.btime.focus();
					return false;
				}

				else if (temp.etime.value=="")
				{
					layer.tips('请选择结束日期',$("#etime"));
					temp.etime.focus();
					return false;
				}

				else if (temp.etime.value<temp.btime.value)
				{
					layer.tips('结束日期选择错误，请重新选择 ',$("#etime"));
					temp.etime.focus();
					return false;
				}else{

					$.ajax({
						url: "http://localhost:9900/Insertaleave",
						type: "post",
						data:{
							job_id: that.temp.job_id,
							btime: that.temp.btime,
							etime:that.temp.etime,
							reason:that.temp.reason,
							examine:0,
						},
						success:function(){
							layer.alert('添加成功', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
							that.getData()
						}
					})
					that.addVisible = false
				}
			},

			//刷新数据
			getData:function(){
				var that = this
				axios.post('http://localhost:9900/Findallaleave').then(function (res) {

					//把从json获取的数据赋值给数组
					var data = res.data.allaleaveinfolist
					that.aleaveinfolist = data
					console.log("aleaveinfolist--->"+that.aleaveinfolist)

				}).catch(function () {
					console.log('失败')
				})
			},

			// 分页刷新
			pageNo_f5: function(pageNo) {
				this.$message('切换当前页：' + pageNo);
				this.f5();
			},
			pageSize_f5: function(pageSize) {
				this.$message('切换页大小：' + pageSize);
				this.f5();
			},

			// 请假拒绝
			Refusealeave: function(data) {
				var that = this
				layer.confirm('确定拒绝此假条？', {icon: 3, title:'提示'}, function(index){
					$.ajax({
						type: 'POST',
						url: 'http://localhost:9900/Refusealeave',
						data: {aleave_id:data.aleave_id},
						success: function(){

							layer.alert('拒绝成功', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
							that.getData()
						},
						error: function(){
							layer.alert('拒绝失败', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
						}
					});
				});

			},

			//同意假条
			Approvalaleave: function(data) {
				var that = this
				layer.confirm('确定批准此假条？', {icon: 3, title:'提示'}, function(index){
					$.ajax({
						type: 'POST',
						url: 'http://localhost:9900/Approvalaleave',
						data: {aleave_id:data.aleave_id},
						success: function(){

							layer.alert('批准成功', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
							that.getData()
						},
						error: function(){
							layer.alert('批准失败', {
								skin: 'layui-layer-molv'
								,closeBtn: 0
								,anim: 4
							});
						}
					});
				});

			},



			// 请假条模糊查询
			findfit: function() {

				var that = this

				$.ajax({
					type: 'POST',
					url: 'http://localhost:9900/AleaveFuzzyreward',
					data: {
						aleave_id:that.p.aleave_id,
						job_id:that.p.job_id,
						beginDate:that.p.beginDate,
						endDate:that.p.endDate,
						ename:that.p.ename,
					},
					success: function(res){

						layer.alert('查询成功', {
							skin: 'layui-layer-molv'
							,closeBtn: 0
							,anim: 4
						});
						console.log(res)
						that.aleaveinfolist=res
					},
					error: function(){

						layer.alert('查询失败', {
							skin: 'layui-layer-molv'
							,closeBtn: 0
							,anim: 4
						});
					}
				});

			}
		}

	})

</script>

</body>
</html>
